<template>
  <div>
    <div>
      <el-input style="width: 200px;margin:0 15px" placeholder="查询名称" v-model="goodsName"></el-input>
      <el-button type="primary" @click="load(1)" plain v-if="user.role === '管理员'">查询</el-button>
      <el-button type="primary" @click="load2(1)" plain v-if="user.role === '用户'">查询</el-button>
      <el-button type="primary" @click="reset" plain>重置</el-button>
    </div>
    <div style="margin: 10px 0">
      <el-button type="danger" plain @click="doubleDelete">批量删除</el-button>
    </div>
    <el-table :data="tableData" stripe :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}"
              style="margin-top: 20px"
              @selection-change="handleSelectChange">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="id" label="序号" width="70" align="center"></el-table-column>
      <el-table-column prop="orderNo" label="订单编号"></el-table-column>
      <el-table-column prop="goodsName" label="商品名称"></el-table-column>
      <el-table-column prop="num" label="商品数量" align="center"></el-table-column>
      <el-table-column prop="total" label="总价格" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="payNo" label="支付编号"></el-table-column>
      <el-table-column prop="payTime" label="支付时间"></el-table-column>
      <el-table-column prop="equName" label="设备名" v-if="show"></el-table-column>
      <el-table-column prop="useCount" label="使用水量" v-if="show"></el-table-column>
      <el-table-column prop="status" label="订单状态" align="center">
        <template v-slot="scope">
          <el-tag type="warning" v-if="scope.row.status === '待支付'">待支付</el-tag>
          <el-tag type="success" v-if="scope.row.status === '已支付'">已支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180px">
        <template v-slot="scope">
          <el-button type="primary" size="small" @click="pay(scope.row)" v-if="scope.row.status === '待支付'">支付
          </el-button>
          <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:10px 0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total,prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios"
import request from "@/utils/request";

export default {
  name: "Orders",
  data() {
    return {
      user: JSON.parse(localStorage.getItem('base-user') || '{}'),
      tableData: [],//所有数据
      pageNum: 1,//当前页码
      pageSize: 6,//每页显示个数
      goodsName: '',
      total: 0,
      form: {},
      show: false,
    }
  },
  created() {
    this.load()
    this.load2()
  },
  methods: {
    pay(row) {
      // const Name = row.equName;
      // const Count = row.useCount;
      // this.$request.put('/equipment/update2', {
      //   name: Name,
      //   count: Count,
      // }).then(updateRes => {
      //   if (updateRes.code === '200' && updateRes.waterSufficient) {
          window.open('http://localhost:9090/alipay/pay?orderNo=' + row.orderNo)
      console.log(row.orderNo)
      //   } else {
      //     this.$message.error('存在设备剩余水量不足');
      //   }
      // }).catch(error => {
      //   this.$message.error('更新设备剩余水量时出错');
      // });
    },
    handleSelectChange(rows) {
      this.ids = rows.map(v => v.id)
    },
    doubleDelete() {
      if (!this.ids.length) {
        this.$message.warning("请选择订单")
        return
      }
      this.$confirm("确认批量删除这些订单么", "确认删除", {type: "warning"}).then(response => {
        this.$request.delete('/orders/delete/double', {data: this.ids}).then(res => {
          if (res.code === "200") {//操作成功
            this.$message.success("操作成功")
            this.load(1)
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
      })
    },
    del(id) {
      this.$confirm("确认删除么", "确认删除", {type: "warning"}).then(response => {
        this.$request.delete('/orders/delete/' + id).then(res => {
          if (res.code === "200") {//操作成功
            this.$message.success("操作成功")
            this.load(1)
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
      })
    },
    reset() {
      this.goodsName = ''
      if (this.user.role === '管理员') {
        this.load()
      } else if (this.user.role === '用户') {
        this.load2()
      }
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    load(pageNum) {  //分页查询
      if (this.user.role === '管理员') {
        if (pageNum) this.pageNum = pageNum
        this.$request.get('/orders/selectByPage', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            goodsName: this.goodsName,
          }
        }).then(res => {
          // 检查 res.data 是否为 null 或 undefined
          if (res.data === null || res.data === undefined) {
            // 处理错误情况，例如显示错误消息或清空表格数据
            console.error('未获取到数据');
            this.tableData = [];
            this.total = 0;
          } else {
            // 正常处理数据
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        }).catch(error => {
          // 处理请求错误
          console.error('请求数据出错:', error);
          // 可以根据需要设置一些错误处理逻辑，比如显示错误消息
        });
      }
    },
    load2(pageNum) {  //分页查询
      if (this.user.role === '用户') {
        if (pageNum) this.pageNum = pageNum
        const useId = this.user.id;
        this.$request.get('/orders/selectByPage2', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            goodsName: this.goodsName,
            useId: useId,
          }
        }).then(res => {
          // 检查 res.data 是否为 null 或 undefined
          if (res.data === null || res.data === undefined) {
            // 处理错误情况，例如显示错误消息或清空表格数据
            console.error('未获取到数据');
            this.tableData = [];
            this.total = 0;
          } else {
            // 正常处理数据
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        }).catch(error => {
          // 处理请求错误
          console.error('请求数据出错:', error);
          // 可以根据需要设置一些错误处理逻辑，比如显示错误消息
        });
      }
    },
  }
}
</script>

<style scoped>

</style>